<template lang="html">
  <div class="app-index">
    <el-carousel height="567px" arrow='never'>
      <el-carousel-item v-for="(item,index) in banners" :key="index">
        <div><img :src="item.img" alt="" class="po-middle-x"></div>
      </el-carousel-item>
    </el-carousel>
    <!-- <div class="index-banner" :style='banner'></div> -->
    <top-header :no='no'></top-header>
    <div class="w1200 index-park" :class="{padTop:yes}">
      <div class="title">
        <span class="line ver-middle"></span><span class="font"><b>空间/</b> Office Park</span><span class="line ver-middle"></span>
      </div>
      <router-link to="/park" class="fr index-more">更多</router-link>
      <div class="park-list">
        <ul>
          <router-link :to='{name:"parkDetail",params: { id: item.json_data.article_id }}' v-for='(item,index) in listPark' key='name' v-if='index<8'>
            <li>
              <img v-lazy='item.json_data.park_img' alt="">
              <div class="font">
                <div class="name">
                  {{item.json_data.name}}
                </div>
                <div class="pos ellipsis">
                  <i class="icon icon-addr ver-middle"></i>{{item.json_data.pos}}
                </div>
              </div>
            </li>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="index-grayBg">
      <div class="w1200 index-teacher">
        <!-- <router-link to="/indexM" class="fr index-more">更多</router-link> -->
        <div class="title">
          <span class="line ver-middle"></span><span class="font"><b>导师/</b> Entrepreneur mentor</span><span class="line ver-middle"></span>
        </div>
        <ul>
          <li v-for='item in teacherInfo'>
            <img v-lazy="item.img" alt="">
            <div class="font">
              <div class="name">{{item.name}}</div>
              <div class="pos">{{item.pos1}}</div>
              <div class="pos">{{item.pos2}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="w1200 index-activity actCommon">
      <router-link to="/activity" class="fr index-more">更多</router-link>
      <div class="title">
        <span class="line ver-middle"></span><span class="font"><b>活动/</b> Park activity</span><span class="line ver-middle"></span>
      </div>
      <div class="content right-act">
        <ul>
          <router-link :to='{name:"actDetail",params:{id:index}}' v-for='(item,index) in this.$store.state.activity.acts' v-if="index<2" key='item.tit'>
            <li :class="{ml:index}">
              <div class="imgBox">
                <img v-lazy="item.img" alt="">
              </div>
              <div class="info">
                <div class="tit">{{item.tit}}</div>
                <div class="time">
                  <i class="icon time ver-middle"></i>时间：{{item.time}}
                  <span class="price fr" v-if='item.isFree'>{{item.price}}</span>
                  <span class="price fr" v-else><em>{{item.price}}</em>元 起</span>
                </div>
                <div class="pos">
                  <i class="icon pos ver-middle"></i>地点：{{item.pos}}
                </div>
                <div class="num">
                  <i class="icon numL ver-middle"></i>人数限额：{{item.num}}
                </div>
                <div class="park">
                  <span class="parkLogo ver-middle">
                    <!-- <img v-lazy="item.logo" alt=""> -->
                  </span>
                  {{item.parkname}}
                </div>
              </div>
            </li>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="index-capital" :style='botBanner'>
      <div class="w1200">
        <div class="title">
          <router-link to="/capital" class="fr index-more">更多</router-link>
          <span class="line ver-middle"></span><span class="font"><b>资本/</b> Capital of capital</span><span class="line ver-middle"></span>
        </div>
        <table>
          <tr>
            <td><img v-lazy="require('../../assets/images/capital1.png')" alt=""></td>
            <td><img v-lazy="require('../../assets/images/capital2.png')" alt=""></td>
            <td><img v-lazy="require('../../assets/images/capital3.png')" alt=""></td>
            <td><img v-lazy="require('../../assets/images/capital4.png')" alt=""></td>
          </tr>
          <tr>
            <td><img v-lazy="require('../../assets/images/capital5.png')" alt=""></td>
            <td><img v-lazy="require('../../assets/images/capital6.png')" alt=""></td>
            <td><img v-lazy="require('../../assets/images/capital7.png')" alt=""></td>
            <td><img v-lazy="require('../../assets/images/capital8.png')" alt=""></td>
          </tr>
        </table>
      </div>
    </div>
    <bot-footer></bot-footer>
  </div>
</template>

<script>
import header from '../header/header.vue';
import footer from '../footer/footer.vue';
import {mapState} from 'vuex'
export default {
  components:{
    'top-header':header,
    'bot-footer':footer
  },
  data(){
    return{
      banners: [
        { img: require('../../assets/images/banner.jpg') },
        { img: require('../../assets/images/banner2.jpg') }
      ],
      botBanner:{
        background: "url(" + require('../../assets/images/capital-banner.jpg') + ") center no-repeat"
      },
      teacherInfo:[
        {img:require('../../assets/images/teacher1.jpg'),name:'祝孝林',pos1:'沃土股份董事长',pos2:'杭州市大学生创业导师'},
        {img:require('../../assets/images/teacher2.jpg'),name:'谭磊',pos1:'美籍，大数据专家',pos2:'北美互联网协会会长'},
        {img:require('../../assets/images/teacher3.jpg'),name:'江俐兵',pos1:'浙江龙之游旅游开发有限公司创始人 兼CEO',pos2:''},
        {img:require('../../assets/images/teacher4.jpg'),name:'齐力然',pos1:'中国中小企业协会副秘书长',pos2:''},
        {img:require('../../assets/images/teacher5.jpg'),name:'楼志鸣',pos1:'原浙江省经信委副主任',pos2:'浙江省中小企业联合服务会会长'}
      ],
      act:[
        {img:require('../../assets/images/act1.png'),tit:'优创加速公开课系列：股权激励知多少',time:'2017-05-13 下午14:00',address:'深圳市南山区海岸大厦东座B14—15楼',intro:'田宁，盘石网盟创始人、董事长兼CEO，全面负责盘石的战略与运营管理，创立全球最大的中文网站联盟，是一位备受尊崇的中国青年商界领袖。2000年毕业于浙江大学，2008年成为世界经济论坛达沃斯全球成长型企业领军代表'},
        {img:require('../../assets/images/act2.png'),tit:'AA未来公开课|创业3.0时代，共享定义未来',time:'2017-04-02 下午14:00',address:'北京市海淀区四季青路7号院1号楼',intro:'刘兴亮，山西柳林人，知名互联网学者。DCCI互联网研究院院长，新媒体天使会创始人兼合伙人，亮时科技董事长。CCTV财经频道、央广经济之声等特约评论员。中关村数字产业联盟副理事长，中国晋商互联网产业促进会会长...'}
      ],
      // 立即报名颜色改变
      applyColor:false,
      no:true,yes:false
    }
  },
  methods:{
    navFixed:function(){
      var nav=document.getElementById('nav');
      var app=document.getElementById('app')
      var top=document.body.scrollTop;
      if(top>567){
        this.no=false;
        this.yes=true;
      }else{
        this.no=true;
        this.yes=false;
      }
    }
  },
  computed:mapState([
    'listPark'
  ]),
  mounted(){
    window.addEventListener('scroll',this.navFixed);
    this.$store.dispatch('load_park_list')
  }
}
</script>

<style lang="less">
@import "index.less";
@import "../activity/activity.less";
</style>
